<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogConstructor.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-descriptions v-loading="loading" class="margin-top" :column="itemSpan" :size="'large'" border>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">建设单位名称</div>
        </template>
        {{ formData.name }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">社会信用代码</div>
        </template>
        {{ formData.code }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">建设单位类型</div>
        </template>
        {{ formData.typeName }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">注册地址</div>
        </template>
        {{ formData.regAddr }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">办公地址</div>
        </template>
        {{ formData.officeAddr }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">法人姓名</div>
        </template>
        {{ formData.legalman }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">法人身份证号码</div>
        </template>
        {{ formData.legalCardno }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">法人手机号码</div>
        </template>
        {{ formData.legalMobile }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <div class="dialog_footer">
        <el-button v-if="!dialogConstructor.detail" type="primary" :loading="loading" @click="handleSubmit"
          >{{ dialogConstructor.footBtn }}
        </el-button>
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { getConstructorsInfo } from "@/api/system/constructor/index.ts";
import { constructorInfoForm } from "@/api/constructor/project/types";
import { getDicts } from "@/store/modules/dict";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(2);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 1;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 2;
  }
}

const props = defineProps({
  dialogConstructor: {
    type: Object,
    default: () => ({
      visible: false,
      title: "建设单位详情",
      footBtn: "",
      id: 0,
      cannotAudit: false,
    }),
  },
});

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
let visible = ref(props.dialogConstructor.visible);
const formData = reactive<constructorInfoForm>({});

onMounted(() => {
  initScreen();

  if (props.dialogConstructor.id) {
    loading.value = true;
    getConstructorsInfo(props.dialogConstructor.id).then(({ data }) => {
      Object.assign(formData, data);
      loading.value = false;
    });
  }
});

onUnmounted(() => {});

function sendClose(query) {
  emit("sendClose", query);
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
  visible.value = false;
  resetForm();
  sendClose(query);
}

/**
 * 重置表单
 */
function resetForm() {
  formData.id = undefined;
}

function economicTypeFilter(val) {
  let temp = economicTypeoptions.filter((item) => item.value === val);
  if (temp && temp[0]) {
    return temp[0].label;
  }
  return "";
}

const economicTypeoptions = getDicts("corpEconomicTypes");
</script>

<style lang="scss" scoped>
.cell-item {
  font-size: 15px;
  //font-weight: bold;
  color: #938d8d;
}
</style>
